{% extends 'base.html' %}
{% load static %}

{% block title %}{{ category.name }}分类的活动 - Meet活动聚{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col-12">
            <h2><i class="bi bi-tag"></i> {{ category.name }}分类的活动</h2>
            {% if category.description %}
            <p class="text-muted">{{ category.description }}</p>
            {% endif %}
        </div>
    </div>

    <!-- 活动列表 -->
    <div class="row">
        {% for activity in activities %}
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card activity-card h-100">
                {% if activity.cover_image %}
                <img src="{{ activity.cover_image.url }}" class="card-img-top" alt="{{ activity.title }}">
                {% else %}
                <img src="https://via.placeholder.com/400x200?text={{ activity.title }}" class="card-img-top" alt="{{ activity.title }}">
                {% endif %}
                
                <span class="badge bg-success activity-badge">
                    {{ activity.get_status_display }}
                </span>
                
                <div class="card-body">
                    <h5 class="card-title">{{ activity.title }}</h5>
                    <p class="card-text text-muted">{{ activity.description|truncatewords:20 }}</p>
                    
                    <div class="mb-2">
                        <small class="text-muted">
                            <i class="bi bi-calendar"></i> {{ activity.start_time|date:"Y-m-d H:i" }}
                        </small>
                    </div>
                    
                    <div class="mb-2">
                        <small class="text-muted">
                            <i class="bi bi-geo-alt"></i> {{ activity.location }}
                        </small>
                    </div>
                    
                    <div class="mb-2">
                        <small class="text-muted">
                            <i class="bi bi-people"></i> {{ activity.current_participants }}/{{ activity.max_participants }}人
                        </small>
                        {% if activity.is_full %}
                        <span class="badge bg-danger">已满</span>
                        {% endif %}
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted">
                            <i class="bi bi-person"></i> {{ activity.creator.nickname|default:activity.creator.username }}
                        </small>
                        <a href="{% url 'activities:activity_detail' activity.id %}" class="btn btn-sm btn-primary">
                            查看详情
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="empty-state">
                <i class="bi bi-inbox"></i>
                <h4>暂无活动</h4>
                <p>该分类下还没有活动</p>
                <a href="{% url 'activities:activity_list' %}" class="btn btn-primary">
                    <i class="bi bi-arrow-left"></i> 返回活动列表
                </a>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}